import React from 'react';
import { Button, Form, Input ,Message} from 'antd';
import { Router, Route, hashHistory, browserHistory, IndexRoute, IndexRedirect , Redirect } from 'react-router';
const createForm = Form.create;
const FormItem = Form.Item;

let FunderApply = React.createClass({
    // componentDidMount(){
    //     this.validCode();
    // },
    //  //图形验证码
    // validCode() {
    //     var img = document.getElementById("Img");
    //     img.src = Utils.apiServer + "/validImg?rnd=" + Math.random();
    // },
    getInitialState() {
        return {
            count: 60,
            time: true,
      
        }
    },
    handleSubmit(){

        console.log('点击了申请');

        let params = this.props.form.getFieldsValue();
        params.nid = 'register';
        console.log(params);
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            
            Utils.sendAjax({
                url: '/funder/applyReg',
                data: JSON.stringify(params),
                callback: function(result) {
                    if (result.code == '200') {
                         Message.success(result.message)
                        hashHistory.push('/'); 
                    } else {
                        Message.error(result.message, 10)
                    }
                }
            })
        });
    },

    sendCode() {

        let form = this.props.form.getFieldsValue();
        let me = this;
        timer=setInterval(function () {
            var count = me.state.count;
            count--;
                console.log(count)
            if(count<1) {
                me.setState({
                    time: true,
                })
                count=60;
                clearInterval(timer);
            }
                // console.log(count)
            me.setState({
                count: count
            })


        },1000)


        Utils.sendAjax({
            url: '/message/sms/send',
            data: JSON.stringify({validCode: '9999', nid: 'register', mobilePhone:form.mobilePhone}),
            callback: (result)=> {
                if(result.code == '200') {
                    Message.success('验证码发送成功，请注意查收');
                    me.setState({
                        time: false
                    })
                }else{
                    Message.error(result.message, 10)
                }
            }
        })

    },

    render() {

        var text = this.state.time ? '获取验证码' : this.state.count+'s后可重新获取';
        const canClick= this.state.time ? false : true;
        const { getFieldProps } = this.props.form;
        const companyProps = getFieldProps('company', {
            rules: [{
                required: true,
                
                message: '公司名称不能为空',
            }],
        });

        const realNameProps = getFieldProps('realName', {
            rules: [{
                required: true,
                
                message: '联系人不能为空',
            }],
        });

        const mobilePhoneProps = getFieldProps('mobilePhone', {
            rules: [{
                required: true,
                
                message: '手机号码不能为空',
            }],
        });

        const emailProps = getFieldProps('email', {
            rules: [{
                required: true,
                
                message: '电子邮箱不能为空',
            }],
        });

        const wechatAcctProps = getFieldProps('wechatAcct', {
            rules: [{
                required: true,
                
                message: '微信号不能为空',
            }],
        });
        const mainBusinessProps = getFieldProps('mainBusiness', {
            rules: [{
                required: true,
                
                message: '主营业务不能为空',
            }],
        });
        const fundSourceProps = getFieldProps('fundSource', {
            rules: [{
                required: true,
                
                message: '资金来源不能为空',
            }],
        });
        const amountMonthProps = getFieldProps('amountMonth', {
            rules: [{
                required: true,
                
                message: '投放金额不能为空',
            }],
        });
        const expectsAprProps = getFieldProps('expectsApr', {
            rules: [{
                required: true,
                
                message: '期望年化收益不能为空',
            }],
        });
        const tenementFinancePerceiveProps = getFieldProps('tenementFinancePerceive', {
            rules: [{
                required: true,
                
                message: '对租房金融产业的认知不能为空',
            }],
        });
         const validCodeProps = getFieldProps('validCode', {
            rules: [{
                required: true,
                
                message: '验证码不能为空',
            }],
        });

        
        return (
                <div>
                   
                    <div className="meWrap">
                        <div className="meMain">
                            <div className="leTitle">入驻申请</div>
                            <div className="leTip">请如实填写以下信息，平台审核通过后，即可成为爱租派房东用户。带 <em>*</em> 为必填内容</div>
                            <div className="meBox">
                                <Form  form={this.props.form}>
                                    <ul>
                                        <li className="meCompany">公司名称 <em>*</em></li>
                                    </ul>
                                    <ul>
                                        <li className="meCompanyInput">
                                            <FormItem label="">
                                                <Input  {...companyProps} placeholder="贵公司名称，20字以内" />
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul className="meTop">
                                        <li className="meCompany">联系人 <em>*</em></li>
                                        <li className="meCompany meAddRight">手机号码 <em>*</em></li>
                                    </ul>
                                    <ul className="meUlInput">
                                        <li className="fl">
                                            <FormItem label="">
                                               <Input className="meLink" {...realNameProps} placeholder="请输入联系人姓名" />
                                            </FormItem>
                                        </li>
                                        <li className="fr">
                                            <FormItem label="">
                                               <Input className="meLink " {...mobilePhoneProps} placeholder="请输入手机号码" />
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul className="meTop">
                                        <li className="meCompany">电子邮箱 <em>*</em></li>
                                        <li className="meCompany meAddRight">微信账号<em>*</em></li>
                                    </ul>
                                    <ul className="meUlInput">
                                        <li className="fl">
                                            <FormItem label="">
                                               <Input className="meLink" {...emailProps} placeholder="请输入电子邮箱" />
                                            </FormItem>
                                        </li>
                                        <li className="fr">
                                            <FormItem label="">
                                               <Input className="meLink " {...wechatAcctProps} placeholder="请输入微信账号" />
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul className="meTop">
                                        <li className="meCompany">主营业务 <em>*</em></li>
                                        <li className="meCompany meAddRight">资金来源 <em>*</em></li>
                                    </ul>
                                    <ul className="meUlInput">
                                        <li className="fl">
                                            <FormItem label="">
                                               <Input className="meLink" {...mainBusinessProps} placeholder="请输入主营业务" />
                                            </FormItem>
                                        </li>
                                        <li className="fr">
                                            <FormItem label="">
                                               <Input className="meLink " {...fundSourceProps} placeholder="请输入资金来源" />
                                            </FormItem>
                                        </li>
                                        
                                    </ul>
                                    <ul className="meTop">
                                        <li className="meCompany">预计每月可投放金额 <em>*</em></li>
                                        <li className="meCompany meAddRight">期望年化收益率 <em>*</em></li>
                                    </ul>
                                    <ul className="meUlInput">
                                        <li className="fl">
                                            <FormItem label="">
                                               <Input className="meLink" {...amountMonthProps} placeholder="请输入每月可投放金额" />
                                            </FormItem>
                                        </li>
                                        <li className="fr">
                                            <FormItem label="">
                                               <Input className="meLink " {...expectsAprProps} placeholder="请输入期望年化收益率" />
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul className="meTop">
                                        <li className="meCompany ">对租房金融产业的认知（限200字）<em>*</em></li>
                                    </ul>
                                    <ul>
                                        <li>
                                            <FormItem label="">
                                               <Input type="textarea" {...tenementFinancePerceiveProps} placeholder="请简单讲述一下，贵公司对租房金融产业的认知，不得超过200字。" />
                                            </FormItem>
                                        </li>
                                    </ul>
                                    <ul className="meTop">
                                        <li className="meCompany ">验证码 <em>*</em></li>

                                    </ul>
                                    <ul>
                                        
                                        <li>
                                            <FormItem label="">
                                               <Input className="validCodeMeLink " {...validCodeProps} placeholder="不区分大小写" />
                                                <Button disabled={canClick} onClick={this.sendCode} style={{marginLeft: 20}}>{text}</Button>
                                            </FormItem>

                                        </li>

                                    </ul>
                                    <ul className="leBtn">
                                        <li>
                                            <Button className="leApplyBtn" type="primary" onClick={this.handleSubmit}>提交申请</Button>
                                        </li>
                                    </ul>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
        )
    }
})
FunderApply = createForm()(FunderApply);
export default FunderApply;
